<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专利管理系统 - 后台管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0A2463',
                        accent: '#3E92CC',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#1E293B',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        info: '#3B82F6'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-shadow {
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg shadow transition-all duration-200;
            }
            .btn-secondary {
                @apply bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg shadow-sm transition-all duration-200;
            }
            .btn-danger {
                @apply bg-danger hover:bg-danger/90 text-white font-medium py-2 px-4 rounded-lg shadow transition-all duration-200;
            }
            .input-focus {
                @apply focus:border-primary focus:ring focus:ring-primary/30 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="flex items-center justify-between px-6 py-3">
        <!-- 左侧Logo和菜单按钮 -->
        <div class="flex items-center space-x-4">
            <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="flex items-center">
                <div class="bg-primary text-white p-2 rounded-lg mr-2">
                    <i class="fa fa-lightbulb-o"></i>
                </div>
                <h1 class="text-xl font-bold text-primary">专利管理系统</h1>
            </div>
        </div>

        <!-- 右侧用户信息和通知 -->
        <div class="flex items-center space-x-6">
            <div class="relative">
                <button class="text-gray-500 hover:text-primary relative">
                    <i class="fa fa-bell text-xl"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                </button>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="h-8 w-8 rounded-full object-cover">
                <span class="hidden md:inline-block font-medium">系统管理员</span>
                <i class="fa fa-angle-down text-gray-500"></i>
            </div>
        </div>
    </div>
</header>

<div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white sidebar-shadow transition-all duration-300 lg:block transform -translate-x-full lg:translate-x-0 fixed lg:relative h-[calc(100vh-64px)] z-40">
        <nav class="p-4">
            <div class="mb-6">
                <h2 class="text-xs uppercase text-gray-400 font-semibold mb-3 px-3">主菜单</h2>
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg bg-primary/10 text-primary">
                            <i class="fa fa-dashboard w-5 h-5 mr-3"></i>
                            <span>仪表盘</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-file-text-o w-5 h-5 mr-3"></i>
                            <span>专利管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-users w-5 h-5 mr-3"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-calendar w-5 h-5 mr-3"></i>
                            <span>年费提醒</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-book w-5 h-5 mr-3"></i>
                            <span>法律法规</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-bar-chart w-5 h-5 mr-3"></i>
                            <span>统计分析</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="mb-6">
                <h2 class="text-xs uppercase text-gray-400 font-semibold mb-3 px-3">系统设置</h2>
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-cog w-5 h-5 mr-3"></i>
                            <span>系统配置</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-user-circle-o w-5 h-5 mr-3"></i>
                            <span>个人设置</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                            <i class="fa fa-sign-out w-5 h-5 mr-3"></i>
                            <span>退出登录</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-auto bg-neutral p-6">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">专利管理系统仪表盘</h1>
            <p class="text-gray-500 mt-1">欢迎回来，系统管理员！这是您的专利管理控制台。</p>
        </div>

        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm font-medium">专利总数</p>
                        <h3 class="text-3xl font-bold mt-1">2,451</h3>
                        <p class="text-success text-sm mt-2 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 12.5% <span class="text-gray-500 ml-1">较上月</span>
                        </p>
                    </div>
                    <div class="bg-primary/10 p-3 rounded-lg">
                        <i class="fa fa-file-text-o text-primary text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm font-medium">待缴年费</p>
                        <h3 class="text-3xl font-bold mt-1">128</h3>
                        <p class="text-danger text-sm mt-2 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 8.2% <span class="text-gray-500 ml-1">较上月</span>
                        </p>
                    </div>
                    <div class="bg-danger/10 p-3 rounded-lg">
                        <i class="fa fa-calendar-times-o text-danger text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm font-medium">活跃用户</p>
                        <h3 class="text-3xl font-bold mt-1">156</h3>
                        <p class="text-success text-sm mt-2 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 5.3% <span class="text-gray-500 ml-1">较上月</span>
                        </p>
                    </div>
                    <div class="bg-success/10 p-3 rounded-lg">
                        <i class="fa fa-users text-success text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm font-medium">本月新增</p>
                        <h3 class="text-3xl font-bold mt-1">246</h3>
                        <p class="text-success text-sm mt-2 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 18.7% <span class="text-gray-500 ml-1">较上月</span>
                        </p>
                    </div>
                    <div class="bg-info/10 p-3 rounded-lg">
                        <i class="fa fa-line-chart text-info text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表和列表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 专利类型分布 -->
            <div class="bg-white rounded-xl p-6 shadow-sm lg:col-span-1">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="font-semibold text-lg">专利类型分布</h2>
                    <div class="text-sm text-gray-500">
                        <select class="bg-gray-100 rounded-lg px-3 py-1 border-none focus:ring-1 focus:ring-primary">
                            <option>全部时间</option>
                            <option>今年</option>
                            <option>本季度</option>
                            <option>本月</option>
                        </select>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="patentTypeChart"></canvas>
                </div>
            </div>

            <!-- 专利状态统计 -->
            <div class="bg-white rounded-xl p-6 shadow-sm lg:col-span-1">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="font-semibold text-lg">专利状态统计</h2>
                    <div class="text-sm text-gray-500">
                        <select class="bg-gray-100 rounded-lg px-3 py-1 border-none focus:ring-1 focus:ring-primary">
                            <option>全部时间</option>
                            <option>今年</option>
                            <option>本季度</option>
                            <option>本月</option>
                        </select>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="patentStatusChart"></canvas>
                </div>
            </div>

            <!-- 年费提醒 -->
            <div class="bg-white rounded-xl p-6 shadow-sm lg:col-span-1">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="font-semibold text-lg">即将到期的年费</h2>
                    <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center p-3 bg-danger/5 rounded-lg border border-danger/20">
                        <div class="bg-danger/10 p-2 rounded-lg mr-3">
                            <i class="fa fa-exclamation-circle text-danger"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">一种新型智能门锁系统</h4>
                            <p class="text-sm text-gray-500">专利号: CN202310000001A</p>
                        </div>
                        <div class="text-right">
                            <p class="text-danger font-medium">剩余7天</p>
                            <button class="text-xs text-primary hover:underline mt-1">处理</button>
                        </div>
                    </div>

                    <div class="flex items-center p-3 bg-warning/5 rounded-lg border border-warning/20">
                        <div class="bg-warning/10 p-2 rounded-lg mr-3">
                            <i class="fa fa-clock-o text-warning"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">高效能太阳能电池板</h4>
                            <p class="text-sm text-gray-500">专利号: CN202320000002U</p>
                        </div>
                        <div class="text-right">
                            <p class="text-warning font-medium">剩余15天</p>
                            <button class="text-xs text-primary hover:underline mt-1">处理</button>
                        </div>
                    </div>

                    <div class="flex items-center p-3 bg-warning/5 rounded-lg border border-warning/20">
                        <div class="bg-warning/10 p-2 rounded-lg mr-3">
                            <i class="fa fa-clock-o text-warning"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">环保型塑料包装材料</h4>
                            <p class="text-sm text-gray-500">专利号: CN202330000003D</p>
                        </div>
                        <div class="text-right">
                            <p class="text-warning font-medium">剩余22天</p>
                            <button class="text-xs text-primary hover:underline mt-1">处理</button>
                        </div>
                    </div>

                    <div class="flex items-center p-3 bg-gray-50 rounded-lg border border-gray-200">
                        <div class="bg-gray-200 p-2 rounded-lg mr-3">
                            <i class="fa fa-calendar text-gray-500"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">智能家庭安防系统</h4>
                            <p class="text-sm text-gray-500">专利号: CN202310000004A</p>
                        </div>
                        <div class="text-right">
                            <p class="text-gray-600 font-medium">剩余30天</p>
                            <button class="text-xs text-primary hover:underline mt-1">处理</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 专利列表 -->
        <div class="bg-white rounded-xl p-6 shadow-sm mb-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                <h2 class="font-semibold text-lg mb-4 md:mb-0">最近添加的专利</h2>
                <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
                    <div class="relative">
                        <input type="text" placeholder="搜索专利..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <button class="btn-primary flex items-center">
                        <i class="fa fa-plus mr-2"></i> 添加专利
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专利名称</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专利号</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请人</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请日期</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">一种新型智能门锁系统</div>
                                    <div class="text-xs text-gray-500">发明专利</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">CN202310000001A</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">发明</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已授权</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            张三,李四
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            2023-01-15
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看</a>
                            <a href="#" class="text-gray-600 hover:text-gray-900 mr-3">编辑</a>
                            <a href="#" class="text-danger hover:text-danger/80">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">高效能太阳能电池板</div>
                                    <div class="text-xs text-gray-500">实用新型专利</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">CN202320000002U</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">实用新型</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已授权</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            赵六
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            2023-03-20
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看</a>
                            <a href="#" class="text-gray-600 hover:text-gray-900 mr-3">编辑</a>
                            <a href="#" class="text-danger hover:text-danger/80">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">环保型塑料包装材料</div>
                                    <div class="text-xs text-gray-500">外观设计专利</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">CN202330000003D</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">外观设计</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已授权</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            周八
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            2023-05-10
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看</a>
                            <a href="#" class="text-gray-600 hover:text-gray-900 mr-3">编辑</a>
                            <a href="#" class="text-danger hover:text-danger/80">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">智能家庭安防系统</div>
                                    <div class="text-xs text-gray-500">发明专利</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">CN202310000004A</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">发明</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">审核中</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            吴九,郑十
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            2023-07-05
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看</a>
                            <a href="#" class="text-gray-600 hover:text-gray-900 mr-3">编辑</a>
                            <a href="#" class="text-danger hover:text-danger/80">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">节能型空调控制系统</div>
                                    <div class="text-xs text-gray-500">实用新型专利</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">CN202320000005U</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">实用新型</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">已申请</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            钱十一,孙十二
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            2023-09-12
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看</a>
                            <a href="#" class="text-gray-600 hover:text-gray-900 mr-3">编辑</a>
                            <a href="#" class="text-danger hover:text-danger/80">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">1</span> 至 <span class="font-medium">5</span> 条，共 <span class="font-medium">2451</span> 条结果
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">上一页</span>
                                <i class="fa fa-chevron-left"></i>
                            </a>
                            <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">1</a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">491</a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">下一页</span>
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 页脚 -->
<footer class="bg-white py-4 px-6 border-t border-gray-200">
    <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-gray-500 text-sm">
            © 2025 专利管理系统. 保留所有权利.
        </div>
        <div class="flex space-x-6 mt-4 md:mt-0">
            <a href="#" class="text-gray-500 hover:text-primary text-sm">帮助中心</a>
            <a href="#" class="text-gray-500 hover:text-primary text-sm">联系我们</a>
            <a href="#" class="text-gray-500 hover:text-primary text-sm">隐私政策</a>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 侧边栏切换
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('-translate-x-full');
    });

    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 专利类型分布图表
        const typeCtx = document.getElementById('patentTypeChart').getContext('2d');
        new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: ['发明专利', '实用新型', '外观设计'],
                datasets: [{
                    data: [1250, 850, 351],
                    backgroundColor: [
                        '#165DFF',
                        '#A855F7',
                        '#F59E0B'
                    ],
                    borderWidth: 0,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                cutout: '70%',
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        });

        // 专利状态统计图表
        const statusCtx = document.getElementById('patentStatusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'bar',
            data: {
                labels: ['已授权', '审核中', '已申请', '已驳回'],
                datasets: [{
                    label: '专利数量',
                    data: [1850, 320, 245, 36],
                    backgroundColor: [
                        '#10B981',
                        '#F59E0B',
                        '#3B82F6',
                        '#EF4444'
                    ],
                    borderRadius: 6,
                    barPercentage: 0.6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            display: true,
                            drawBorder: false,
                        },
                        ticks: {
                            padding: 10
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false,
                        },
                        ticks: {
                            padding: 10
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    });
</script>
</body>
</html>
